<template>
	<view class="video-item">
		<view class="video-player" @click.stop="goVideoDetail(videoItem.id)">
			<image :src="videoItem.video?.imgUrl" mode="" />
			<view class="video-title">
				{{videoItem.title}}
			</view>
			<view class="play-but">

			</view>
			<view class="info-bar">
				<view class="time">
					{{time}}
				</view>
			</view>

		</view>
		<view class="video-info">
			<view class="info-log">
				<image :src="videoItem.user.avatarurl" class="info-img" />
				<view class="info-name">
					{{videoItem.user.nickName}}
				</view>
			</view>
			<view class="video-praise">
				<view class="praise-item item-one">
					<image src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-praise.png" mode=""
						class="icon-one" v-if="isZan" @click.stop="addZan(videoItem.upCount)" />
					<image src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-praised.png" mode=""
						class="icon-one" v-else @click.stop="reduceZan(videoItem.upCount)" />
					<view class="info-tetx">
						{{videoItem.upCount}}
					</view>
				</view>
				<view class="praise-item item-two">
					<image src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-comment.png" mode=""
						class="icon-one" />
					<view class="info-tetx">
						{{videoItem.commentCount}}
					</view>
				</view>
				<view class="praise-item">
					<image src="https://obj.pipi.cn/festatic/asgard/resources/images/media/video-share.png" mode=""
						class="icon-one" />
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		computed
	} from 'vue'

	const props = defineProps({
		videoItem: Object
	})

	const goVideoDetail = (id) => {
		// console.log(id, 'id');
		uni.navigateTo({
			url: `/pages/videoDetail/videoDetail?item=${encodeURIComponent(JSON.stringify(props.videoItem))}`
		});
	}


	const getZero = (num) => {
		return num >= 10 ? num : '0' + num
	}


	const time = computed(() => {
		let timer = props.videoItem.video?.dur
		return timer >= 60 ? (getZero(Math.floor(timer / 60))) + ':' + (getZero(Math.floor(timer % 60))) : '00' +
			':' + getZero(timer)
	})

	// 点赞
	const isZan = ref(true)
	const addZan = (zan) => {
		isZan.value = false
		props.videoItem.upCount = zan + 1
	}
	const reduceZan = (zan) => {
		props.videoItem.upCount = zan - 1
		isZan.value = true
	}
</script>

<style lang="scss">
	.video-item {
		width: 100%;

		.video-player {
			width: 100%;
			height: 422rpx;
			position: relative;


			.videos {
				width: 100%;
				height: 100%;
				background-color: #000;
				object-fit: cover;
			}

			image {
				width: 100%;
				height: 422rpx;
				position: absolute;
				top: 0;
				left: 0;
			}


			.video-title {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 34rpx;
				color: var(--white);
				letter-spacing: 0;
				line-height: 48rpx;
				z-index: 2;
				margin: 18rpx 3rpx 38rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				word-wrap: break-word;
				word-break: break-all;
				overflow: hidden;
			}

			.play-but {
				z-index: 10;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 116rpx;
				height: 116rpx;
				margin-left: -58rpx;
				margin-top: -58rpx;
				background-image: url(https://obj.pipi.cn/festatic/asgard/resources/images/media/video-btn-play.png);
				background-size: contain;
			}

			.info-bar {
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 60rpx;
				line-height: 60rpx;
				background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .5));
				color: #fff;
				font-size: 26rpx;


				.time {
					float: right;
					margin-right: 20rpx;
				}
			}


		}

		.video-info {
			width: 100%;
			height: 92rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 30rpx;
			background-color: var(--white);
			box-sizing: border-box;

			.info-log {
				display: flex;

				.info-img {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}

				.info-name {
					margin-left: 16rpx;
					font-size: 28rpx;
					color: #666;
				}
			}

			.video-praise {
				display: flex;
				justify-content: space-between;
				margin-right: 30rpx;
				font-size: 26rpx;


				.praise-item {
					display: flex;
				}

				.info-tetx {
					margin-left: 10rpx;
				}

				.item-one {
					margin-right: 40rpx;
				}

				.item-two {
					margin-right: 39rpx;
				}

				.icon-one {
					width: 36rpx;
					height: 36rpx;
				}

			}
		}
	}

	video::-webkit-media-controls-play-button {
		display: none;
	}
</style>